<!--
 * @Author: lxj l18762185937@163.com
 * @Date: 2022-09-16 08:53:59
 * @LastEditors: lxj lxj1008007@163.com
 * @LastEditTime: 2022-09-16 20:57:44
 * @FilePath: \9.16李雪军作业\my-work\src\views\HomeView.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-table :data="hu" style="width: 100%">
    <el-table-column prop="id" label="Id" width="180" />
    <el-table-column prop="name" label="姓名" width="180" />
    <el-table-column prop="title" label="爱好" width="180" />
    <el-table-column prop="city" label="地址"></el-table-column>

    <el-table-column label="Operations">
      <template #default>
        <el-button size="small">详情</el-button>
        <el-button size="small">编辑</el-button>
        <el-button size="small" type="danger">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    :page-size="pageSlize"
    :default-current-page="pageCode"
    :pager-count="11"
    layout="prev, pager, next"
    @current-change="getList"
    :total="total"
  />
</template>

<script lang="ts" setup>
import axios from 'axios'
import { onMounted, ref, watch } from 'vue'
// import { useRoute, useRouter } from 'vue-router'

// vue3定义的方式
let hu = ref<HomeList[]>([])
console.log()
//ts的规范类型,与后端数据保持一致
interface HomeList {
  img: string
  name: string
  title: string
  id: string
  city: string
}
const pageCode = ref(1)
let total = ref<number>(0)
const pageSlize = 10

console.log(pageCode, pageSlize)

const getList = (num: number) => {
  axios
    .get('/api/list', {
      params: {
        pageCode: num,
        pageSlize,
      },
    })
    .then((reqs) => {
      hu.value = reqs.data.data
      total.value = reqs.data.length
    })
}
watch(pageCode, () => {
  getList(1)
})
//vue3生命周期全家桶，包括四个vue2的生命周期
onMounted(() => {
  getList(1)
})
</script>
